<template>
  <div class="classify">
    <SelfAdaption>
      <template v-slot:selfBoxs>
        <SelfBox class="self-adaption-son" v-for="functionality of functionalities" :key="functionality.id" :info="{
          insert: functionality.name,
          backgroundImage: functionality.cover_url,
          outsert: ''
        }" :to="{name: 'FunctionalityDisplay', params: {functionalityId: functionality.id}}">
        </SelfBox>
      </template>
    </SelfAdaption>
  </div>
</template>

<script>
import BaseFrameSet from '__LAYOUTS__/base_frame_set/BaseFrameSet.vue'
import SelfBox from '__COMPONENTS__/self_adaption/SelfBox.vue'
import SelfAdaption from '__COMPONENTS__/self_adaption/SelfAdaption.vue'

import { GET_FUNCTIONALITIES} from '__STORE__/operation-type'

export default {
  name: 'Classify',
  data: ()=>({
    functionalities: []
  }),
  components: {
    SelfAdaption,
    SelfBox,
    BaseFrameSet
  },
  created() {
    this.getFunctionalities()
  },
  methods: {
    //获取功能性标题
    async getFunctionalities() {
      try {
        this.$Loading.show()
        const dataRsource = this.$store.state.globalConfig
        //如果没有等待 获取数据
        if(!dataRsource.functionalities) await this.$store.dispatch(GET_FUNCTIONALITIES)
        this.$Loading.hidden()
        //成功获取数据
        const functionalities = dataRsource.functionalities 
        this.functionalities = Object.freeze(functionalities)
      }catch(e) {
        console.log(e.message)
      }
    }
  }
}
</script>

<style lang="less">
 @import url('__CSS__/classify/classify.less');
</style>